<template>
  <div :loading="loading">
    <v-chart :forceFit="true" :height="height" :data="data" >
      <v-coord type="rect" direction="LB" />
      <v-tooltip />
      <v-axis dataKey="partition" :label="label" />
      <v-bar position="partition*messageSize" />
    </v-chart>
  </div>
</template>

<script>
  const DataSet = require('@antv/data-set');

  export default {
    props: {
      loading: {
        default: false
      },
      partitions: {
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {
        height: 400,
        label: { offset: 12 },
      };
    },
    computed:{
      data() {
        const datas = this.partitions.map(({ partition, messageSize })=>{
          return { partition: partition.toString(), messageSize }
        });
        const dv = new DataSet.View().source(datas);
        const data = dv.rows;
        return data
      }
    },
  };
</script>